<template>
  <div class="p-2 demand-deliver">
    <div class="mb-2">
      <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="w-full" value-format="YYYY-MM-DD"
        @change="getCycleList()" />
    </div>
    <div class="overflow-y-auto">
      <div class="purchase-demand-deliver-list" :class="[active === index? 'is--active':'']" v-for="(item, index) in cycleList"
        :key="index" @click="handleChangeDate(item,index)">
        <div v-if="active === index" class="bg-[#3487FF] text-white absolute right-0 px-[3px] py-[2px] top-0 text-xs overflow-hidden" style="border-radius: 0 4px 0 4px;">当前</div>
        <div class="text-sm font-bold mb-1">{{ item.year }}年WK{{ item.week }}发货计划</div>
        <div class="flex justify-between mb-1 text-[#999]">
          <div>{{ item.start }}至{{ item.end }}</div>
        </div>
        <el-progress :percentage="item.percent" class="w-full text-xs" />
      </div>
    </div>
  </div>
</template>
<script setup>
import api from "../api/index.js"
const props = defineProps({
  show: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["toggle", "changeDeliverTime"]);

const data = reactive({
  date: [],
  cycleList: [],
  active: 0,
  plan_type: 2
});

const { date, cycleList, active, plan_type } = toRefs(data);

const getCycleList = async () => {
  let deliver_time = {};
  if (date.value?.length) {
    deliver_time.start = date.value[0];
    deliver_time.end = date.value[1];
  } else {
    deliver_time.start = "";
    deliver_time.end = "";
  }
  api.getCycle({ deliver_time, plan_type: plan_type.value }).then((res) => {
    cycleList.value = res.data
    active.value = res.data.findIndex(d => d.current)
  })
}

getCycleList()

const handleChangeDate = (item, index = 0) => {
  active.value = index
  emit("changeDeliverTime", [item.start + ' 00:00:00', item.end + ' 23:59:59'])
}

const query = (type = 2) => {
  active.value = ''
  date.value = []
  plan_type.value = type
  getCycleList()
}

defineExpose({ query })

</script>

<style lang="scss">
.demand-deliver {
  .el-progress__text {
    min-width: 40px;
    span {
      font-size: 12px;
    }
  }
}
.purchase-demand-deliver-list{
  position: relative;
  border: 1px solid;
  border-color: rgba($color: #6b7280, $alpha: .2);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  &.is--active{
    background-color: rgba($color: #3b82f6, $alpha: .1);
  }
}
</style>